<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        媒体特性,
            width,视口的宽度
            height 视口的高度

            min-width 视口的最大宽度(视口大于指定宽度时生效)
            max-width 视口最小宽度(视口小于指定宽度时生效)
     -->
     <style>
         /* @media(width:500px){
             body{

             }
             background-color: #bfa;
         } */
         /* 
            样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化
            一般比较常用的断点
            
            小于768 超小屏幕 max-width=768px
            大于768 小屏幕   min-width=768px
            大于992 中型屏幕 min-width=992px
            大于1200 大屏幕  min-width=1200px
                and表示且 ,表示或 not表示非(除了)
         */
         @media only screen (min-width:500px) and (max-width:700px){
            body{
                background-color: #bfa;
            }
         }
     </style>
</head>
<body>
    
</body>
</html>